<template>
  <div id="cpn">
    <h1 class="title">员工订餐管理系统</h1>
    <div class="box">
      <h2>登录</h2>
      <div class="input-box">
        <label>用户名</label>
        <input name="account" type="text" v-model="account"/>
      </div>
      <div class="input-box">
        <label>密码</label>
        <input name="pwd" type="password" v-model="pwd"/>
      </div>
      <div class="option">
        <div class="auto-login">
          <input name="option" type="checkbox" value="2" v-model="option"/>
          &nbsp;自动登录
        </div>
      </div>
      <div class="btn-box">
        <div>
          <el-button @click="login" :loading="load">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import initRouter from '@/router/getAsyncRouter'

    export default {
        name: "Login",
        data() {
            return {
                account: '',
                pwd: '',
                msg: '',
                option: [],
                load: false
            }
        },
        methods: {
            login() {
                //校验用户名和密码不为空
                if (this.account !== '' && this.pwd !== '') {
                    //ajax请求后台
                    //post
                    this.$http.post("login", {
                        account: this.account,
                        pwd: this.pwd
                    }).then((res) => {
                        if (res.code === "200") {
                            //存储用户名信息
                            sessionStorage.setItem("token", res.data.token)
                            sessionStorage.setItem("userid", res.data.userid)
                            sessionStorage.setItem("empno", res.data.userno)
                            sessionStorage.setItem("deptno", res.data.deptno)
                            this.$store.dispatch("setUname", res.data.uname)
                            
                            //自动登录
                            if (this.option && this.option.includes("2")) {
                                localStorage.setItem("account", this.account)
                                localStorage.setItem("pwd", this.pwd)
                            }

                            //将动态路由信息存放到vuex中
                            this.$store.commit("setRouterData", res.data.routes)

                            //将用户头权限等级存放到vuex中
                            this.$store.commit("setPermission", res.data.permission)

                            //将用户头像信息存放到vuex中
                            this.$store.commit("setHeadPhoto", res.data.headshot)

                            //请求数据字典信息，并将其存放到vuex中
                            this.$http.get("getAllDict").then(res => {
                                this.$store.commit("setDict", res.data)
                            })

                            //加载动态路由
                            initRouter(res.data.routes)

                            //清空标签
                            this.$store.state.tags = []

                            //跳转到主页
                            this.$message.success("欢迎您，" + res.data.uname)
                            this.load = true
                            setTimeout(() => {
                                this.$router.push({
                                    path: "/welcome"
                                })
                            }, 1000)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).catch(() => {
                        this.$message.error("服务器错误")
                    })
                } else {
                    this.$message.error("用户名或者密码不可为空")
                }
            }
        },
        created() {
            //清除动态路由
            this.$store.dispatch("setRouterData", null)

            //自动登录
            if (localStorage.getItem("account")) {
                this.account = localStorage.getItem("account")
                this.pwd = localStorage.getItem("pwd")
                this.option.push("2")
                this.login()
            }
        }
    }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  #cpn {
    height: 100vh;
    background: url('@/assets/img/bg.png') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    position: absolute;
    top: 15%;
    z-index: 2;
    color: white;
  }

  .box {
    width: 350px;
    height: 350px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    background: rgba(50, 50, 50, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    position: absolute;
  }

  .box > h2 {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
  }

  .box .input-box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .box .input-box label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 5px;
  }

  .box .input-box input {
    letter-spacing: 1px;
    font-size: 14px;
    box-sizing: border-box;
    width: 250px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.9);
    transition: 0.2s;
  }

  .box .input-box input:focus {
    border: 1px solid rgba(255, 255, 255, 0.8);
  }

  .box .btn-box {
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .box .btn-box > div {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .box .btn-box > div > button {
    outline: none;
    margin-top: 10px;
    display: block;
    font-size: 14px;
    border-radius: 5px;
    transition: 0.2s;
  }

  .box .btn-box > div > button {
    width: 120px;
    height: 35px;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(192, 119, 91, 0.7);
    background: rgba(192, 119, 91, 0.5);
  }

  .box .btn-box > div > button:hover {
    border: 1px solid rgba(251, 128, 71, 0.7);
    background: rgba(251, 128, 71, 0.5);
  }

  .option {
    width: 250px;
    height: 35px;
    display: flex;
    align-items: center;
  }

  .option > div {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: white;
  }

  .option > div > input {
    width: 16px;
    height: 16px;
  }
</style>